<template>
  <div class="user-management">
    <!-- 搜索和筛选区域 -->
    <div class="search-bar">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="用户名称">
          <el-input v-model="form.userName" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.phone" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="用户状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="启用" value="active"></el-option>
            <el-option label="禁用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
              v-model="form.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="operation-buttons">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="success" @click="handleEdit">修改</el-button>
      <el-button type="danger" @click="handleDelete">删除</el-button>
      <el-button type="info" @click="handleImport">导入</el-button>
      <el-button type="warning" @click="handleExport">导出</el-button>
    </div>

    <!-- 用户列表表格 -->
    <div class="table-container">
      <el-table :data="userList" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="用户编号" width="80"></el-table-column>
        <el-table-column prop="username" label="用户名" width="120"></el-table-column>
        <el-table-column prop="nickname" label="用户昵称" width="120"></el-table-column>
        <el-table-column prop="department" label="部门" width="150"></el-table-column>
        <el-table-column prop="phone" label="手机号码" width="150"></el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEditRow(scope.$index, scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="handleDeleteRow(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserView',
  data() {
    return {
      form: {
        userName: '',
        phone: '',
        status: '',
        dateRange: []
      },
      userList: [
        {
          id: 1,
          username: 'admin',
          nickname: '岩依',
          department: '研发部门',
          phone: '15888888888',
          status: true,
          createTime: '2025-05-26 10:07:46'
        },
        {
          id: 2,
          username: 'ry',
          nickname: '岩依',
          department: '测试部门',
          phone: '15606666666',
          status: true,
          createTime: '2025-05-26 10:07:47'
        }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 2
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索:', this.form)
      // 这里可以调用接口查询数据
    },
    resetForm() {
      this.form = {
        userName: '',
        phone: '',
        status: '',
        dateRange: []
      }
    },
    handleAdd() {
      alert('点击新增')
    },
    handleEdit() {
      alert('批量修改')
    },
    handleDelete() {
      alert('批量删除')
    },
    handleImport() {
      alert('导入功能')
    },
    handleExport() {
      alert('导出功能')
    },
    handleStatusChange(row) {
      console.log('状态变更:', row)
      // 可以发送请求更新状态
    },
    handleEditRow(index, row) {
      alert(`编辑用户: ${row.username}`)
    },
    handleDeleteRow(index, row) {
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.userList.splice(index, 1)
        this.total--
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style scoped>
.user-management {
  padding: 20px;
  background-color: #f5f7fa;
}

.search-bar {
  margin-bottom: 20px;
  background: white;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.operation-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.table-container {
  background: white;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.pagination {
  text-align: right;
  margin-top: 20px;
}
</style>